<template>
  <span>
    <span v-for="(item,index) in btns" :key="index" style="margin: 2px;">
      <span
        v-if="item.type==='icon' && (!item.showFun ||(typeof item.showFun ==='function' && item.showFun(scope.row,scope.$index)))"
        class="btn-icon-box"
        :title="item.operation"
        @click.stop="btnClick(item,scope)"
      >
        <img v-if="item.icon" class="self-btn-icon" :src="item.icon">
        <span v-else-if="scope.row[item.key]">{{ scope.row[item.key] }}</span>
        <span v-else>{{ item.operation || item.name }}</span>
      </span>
      <el-button v-else v-bind="item.props">{{ item.name }}</el-button>
    </span>
  </span>
</template>

<script>
// import { specFrockDxProcessPlan } from '@/api/craft'
export default {
  name: 'EditTableRow',
  components: { },
  props: {
    scope: {
      default: null
    },
    btns: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: []
    }
  },
  data() {
    return {

    }
  },
  computed: {
    state() {
      return this.scope.row.state
    }
  },
  watch: {
  },
  created() {
  },
  mounted() {
  },
  activated() {
  },
  beforeDestroy() {
  },
  methods: {
    btnClick(item, scope) {
      if (item.handleClick) {
        item.handleClick(scope.row, scope.$index)
      }
      if (item.toPathRoute) {
        const pageUrl = this.$utils.attachTemplateDoubleToData(item.toPathRoute, scope.row)
        this.$router.push({ path: pageUrl, query: { fromPage: this.$route.path }})
      }
      this.$emit('clickRowFun', scope, item)
    },
    nullFun() {}
  }
}
</script>
<style lang='scss'>
.self-btn-icon{
  width: 18px;
  height: 18px;
}
.btn-icon-box{
  display: inline-block;
  padding-right: 8px;
  cursor: pointer;
  color: blue;
}
</style>
